/**
 * Created by nyf on 2017/9/18.
 */
import React, { Component } from 'react';
import { connect } from 'react-redux';
import {hashHistory} from 'react-router';
import screenfull from 'screenfull';
import { LoginOut } from '../../action/ActionUser';
import { setCommonSystemLoading } from '../../action/Action';
import * as DataName from "../../action/DataNameConfig";
import { EditPassword } from "../user/PasswordModal";
import { Menu, Icon, Layout, Popover } from 'antd';
import SiderCustom from './SiderCustom';
const { Header } = Layout;
const SubMenu = Menu.SubMenu;

class HeaderCustom extends Component {
    constructor(props){
        super(props);
        this.state = {
            user: '',
            visible: false,
            collapsed:false
        };
        /* 获取数据类型 */
        this.loginOut=()=>{
            let {dispatch} = this.props;
            dispatch(LoginOut());
            hashHistory.push("/login");
        }

        this.openEditPassword=()=>{
            let {dispatch} = this.props;
            dispatch(setCommonSystemLoading(DataName.EDIT_PASSWORD_MODAL,true));
        }
    }
    componentDidMount() {

    };
    screenFull = () => {
        if (screenfull.enabled) {
            screenfull.request();
        }
    };
    menuClick = e => {
        console.log(e);
        e.key === 'logout' && this.logout();
    };
    logout = () => {
        localStorage.removeItem('user');
        this.props.router.push('/login')
    };
    popoverHide = () => {
        this.setState({
            visible: false,
        });
    };
    handleVisibleChange = (visible) => {
        this.setState({ visible });
    };
    render() {
        const { path, SystemConfig, User } = this.props;
        let responsive = SystemConfig.responsive;
        /*let auth = SystemConfig.auth;*/
        return (
            <Header style={{ background: '#fff', padding: 0, height: 65 }} className="custom-theme" >
                {
                    responsive && responsive.isMobile ? (
                            <Popover content={<SiderCustom path={path} popoverHide={this.popoverHide} />} trigger="click" placement="bottomLeft" visible={this.state.visible} onVisibleChange={this.handleVisibleChange}>
                                <Icon type="bars" className="trigger custom-trigger" />
                            </Popover>
                        ) : (
                            <Icon
                                className="trigger custom-trigger"
                                type={this.props.collapsed ? 'menu-unfold' : 'menu-fold'}
                                onClick={this.props.toggle}
                            />
                        )
                }
                <Menu
                    mode="horizontal"
                    style={{ lineHeight: '64px', float: 'right' }}
                    onClick={this.menuClick}
                >
                    <Menu.Item key="full" onClick={this.screenFull} >
                        <Icon type="arrows-alt" onClick={this.screenFull} />
                    </Menu.Item>
                    <SubMenu title={<span className="avatar"><img src={User?User.avatar:""} alt="头像" /><i className="on bottom b-white" /></span>}>
                        <Menu.Item key="userName"><div>{User?User.name:""}</div></Menu.Item>
                        {/*<Menu.Item key="editPassword" onClick={this.openEditPassword}><div onClick={this.openEditPassword}>修改密码</div></Menu.Item>*/}
                        <Menu.Item key="loginOut" onClick={this.loginOut}><div onClick={this.loginOut}>退出</div></Menu.Item>
                    </SubMenu>
                </Menu>
                <style>{`
                    .ant-menu-submenu-horizontal > .ant-menu {
                        width: 120px;
                        left: -40px;
                    }
                `}</style>
                <EditPassword />
            </Header>
        )
    }
}

export default connect(state=>({
    User: state.User,
    SystemConfig:state.SystemConfig
}))(HeaderCustom);